<template>
  <div class="business-container">
    <div id="product" class="chart" />
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'ProductTransaction',
  props: ['passvalue'],
  data() {
    return {}
  },
  mounted() {
    this.getEchartLeft1()
  },
  beforeDestroy() {

  },
  methods: {
    getEchartLeft1() {
      const myChart = echarts.init(document.getElementById('product'))

      const option = {
        legend: {
          data: ['玉米', '豆粕']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: '{b0}月销售额<br />{c0}万元<br />'
        },
        xAxis: {
          data: ['2012', '2013', '2014', '2015', '2016'],
          boundaryGap: true,
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          // axisLabel: {
          //   name: '月份',
          //   show: true,  //这里的show用于设置是否显示y轴下的字体 默认为true
          //   textStyle: {   //textStyle里面写y轴下的字体的样式
          //     color: '#fff',
          //     fontSize: 13
          //   },
          //   formatter: '{value}月'
          // },
          axisLine: {
            symbolOffset: [10, 0],
            lineStyle: { color: '#05C1FF' }
          }

        },
        yAxis: {
          show: true,
          splitLine: { lineStyle: { width: 0.5, color: '#FFFFFF' }},
          type: 'value',
          axisLabel: {
            show: true, // 这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle: { // textStyle里面写y轴下的字体的样式
              color: '#fff',
              fontSize: 13
            }
          },
          axisLine: {
            show: true, // 这里的show用于设置是否显示y轴那一条线 默认为true
            lineStyle: { // lineStyle里面写y轴那一条线的样式
              color: '#05C1FF'
              // width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
            }
          }
        },
        series: [{
          name: '月tttt',
          // coordinateSystem: 'polar',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          labelLine: {
            show: false,
            showAbove: true
          },
          // barWidth: 30,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 只要修改前四个参数就ok
              offset: 0,
              color: '#05C1FF'
            }, // 柱图渐变色
            {
              offset: 1,
              color: '#0CE2FF'
            }
            ])
            // decal:{}
          },
          label: {
            show: true,
            color: '#FFFFFF',
            position: 'top',
            // rotate: 20,
            formatter: '{c}万元'
          },
          showBackground: false
          // backgroundStyle: {
          //     // borderColor:'#000',
          //     // borderWidth:1,
          //     // borderType:'solid',
          //     // shadowBlur: 10,
          //     // shadowColor: 'rgba(0, 0, 0, 0.5)',
          //
          //
          //     color: 'rgba(180, 180, 180, 0.2)'
          // }
        }]
      }
      myChart.setOption(option)

      myChart.setOption({
        xAxis: {
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          label: {
            formatter: '2020-{value}月'
          }
        },
        series: [
          {
            name: '玉米',
            type: 'bar',
            barGap: 0,
            // label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 220, 182]
          },
          {
            name: '豆粕',
            type: 'bar',
            // label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 320, 332, 301, 334, 390, 191, 234, 290, 220, 182]
          }
          // {
          //   name: 'Desert',
          //   type: 'bar',
          //   // label: labelOption,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [150, 232, 201, 154, 190]
          // },
          // {
          //   name: 'Wetland',
          //   type: 'bar',
          //   // label: labelOption,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [98, 77, 101, 99, 40]
          // }
        ]
      })

      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.business-container {
  display: flex;
  flex-grow: 1;

  .chart {
    flex-grow: 1;
  }
}
</style>
